<template>
	<view class="submitOrder">
		<!-- #ifdef H5 -->
		<Header @back="back" left-icon="back" left-text="" right-text="" title="订单提交"></Header>
		<!-- #endif -->
		<view class="pad-content">
		<view class="content">
			<view class="content-top">
				<view class="title">
					{{resDate.goodsName}}
				</view>
				<!-- <view class="describe">
					<image class="img" style="width: 25upx;height: 25upx;" src="/static/img/clock.png"></image>
					入场:{{resDate.admissionStart}}-{{resDate.admissionEnd}}
					取票:{{resDate.takeStart}}-{{resDate.takeEnd}}
				</view> -->
				<view class="ordering">
					<view class="ordering-left" @click="orderTip">
						订票须知
						<text class="iconfont icon-right"></text>
						<!-- <image style="width: 12upx;height: 22upx;margin-left: 9upx;" class="img" src="/static/img/right.png"></image> -->
					</view>
					<!-- <view class="ordering-right">
						￥{{parentDate.price}}
					</view> -->
				</view>
			</view>
			<view class="content-bottom">
				<view class="useDate">
					<view class="useDateTxt">
						使用日期
					</view>
					<view class="useDateList">
						<view class="useDateNow" v-bind:class="{ active: isActive }" @click="changeDateByActive('1')">
							<view>今天{{currentDateTxt}}</view>
							<view>¥{{resDate.price}}</view>
							<!-- <i class="iconfont icon-check"></i> -->
						</view>
						<view class="useDateTorro" v-bind:class="{ active: isActive1 }" @click="changeDateByActive('2')">
							<view>明天{{nextDateTxt}}</view>
							<view>¥{{resDate.price}}</view>
						</view>
						<view class="useDateAfter" v-bind:class="{ active: isActive2 }" @click="changeDateByActive('3')">
							<view>后天{{afterDateTxt}}</view>
							<view>¥{{resDate.price}}</view>
						</view>
						<view class="useDateMore" v-bind:class="{ active: isActiveMore}" @click="changeDate">
							<view v-if="!isActiveMore" >
								<view>更多日期</view>
								<!-- <view></view> -->
							</view>
							<view v-if="isActiveMore">
								<view>{{moreDateTxt}}</view>
								<view>¥{{resDate.price}}</view>
							</view>
							<view v-if="!isActiveMore">
								<text class="iconfont icon-right"></text>
								<!-- <image style="width: 12upx;height: 22upx;margin-left: 20upx;" class="img" src="/static/img/right.png"></image> -->
							</view>
						</view>
					</view>

				</view>
				<view class="ticket">
					<view class="ticketTxt">
						门票数量
					</view>
					<view class="ticketList">
						<view class="ticketSub" @click="Sub">
							-
						</view>
						<!-- <view class="ticketNum"> -->
						<input class="uni-input ticketNum" v-model="ticketNum" placeholder="" />
						<!-- </view> -->
						<view class="ticketAdd" @click="Add">
							+
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="date" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view class="main-box">
			<view class="main">
				<view class="title">
					取票人信息
				</view>
				<view class="contacts">
					<text>姓&nbsp;&nbsp;&nbsp;名</text>
					<input class="uni-input mainInput InputName" v-model="userName" 
					 placeholder="请填写真实姓名" />
				</view>
				<view class="phoneNum">
					<text>手机号</text>
					<input maxlength="11" class="uni-input mainInput InputPhone" type="number" v-model="userPhone" 
					 placeholder="请输入手机号码" />
					 <!-- <text class="ptext" @click="sendSms">发送验证码</text> -->
				</view>
				<!-- <view class="phoneNum">
					<text>验证码</text>
					<input class="uni-input mainInput InputPhone" type="number" v-model="userPhone" @focus="inputFocus(2)" @blur="inputBlur(2)"
					 placeholder="请输入短信验证码" />
				</view> -->
				
				<view class="phoneNum" style="border-bottom: none;">
					<text>身份证</text>
					<input maxlength="18" class="uni-input mainInput InputPhone fz19" type="text" v-model="identityCard"  @focus="hideTabbar" @blur="showTabbar"
					 placeholder="确认购票人信息的真实性" />
				</view>
		</view>
		</view>
		<!-- <view class="fapiao-box">
			<view class="fapiao">
				<view class="title">
					<text style="font-weight: bold;">发票</text>
				</view>
				<view>
					<text style="color: #bbb;">电子发票</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
	 -->
		
		<!-- <view class="bottom">
			<view class="bottom-left">
				<text class="moneyTxt">总计金额：</text>
				<text class="money">￥{{parentDate.price}}</text>
			</view>
			<view class="bottom-right" @click="submitOrder">
				<text>提交</text>
			</view>
		</view> -->
		<!-- 		<xy-dialog title="提示" content="" :show="show">
			<view style="padding: 0 30upx 30upx;">
				<view>订票须知</view>

			</view>
		</xy-dialog> -->
		<!-- <view style="position: fixed; bottom: 0;width: 100%;"> -->
		<view class="foot-bar" v-if="tabbar">
				
					<view class="bottom-left">
						<text class="moneyTxt fz18">应付：</text>
						<text class="money fz20 font-weight" >￥{{resDate.price * ticketNum}}</text>
					</view>
				
					<view  class="bottom-right fz19  submit" @click="submitOrder">立即订购</view>
							
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue'
	// import xyDialog from '@/components/xy-dialog.vue';
	export default {
		data() {
			return {
				setitle:'',
				ticketNum: 1, //门票数

				//日期控件
				showPicker: false,
				type: 'date',
				date: '',
				//日期控件#end

				// show: false,
				isActive: true, //当前日期Active
				isActive1: false, //明天Active
				isActive2: false,//后天Active
				isActiveMore:false,//更多
				isMore:false,
				selectDate: '', //选择日期
				currentDate: '', //当前日期
				nextDate: '', //明天
				afterDate:'',//后天
				resDate: '', //数据
				//姓名
				userName: '',
				spotId:"",
				//电话
				userPhone: '',
				identityCard:'',
				parentDate: '',
				lastFocusInputIndex: '',
				currentDateTxt: '',
				nextDateTxt: '',
				afterDateTxt:'',
				moreDateTxt:'',
				totalPrice: 0,
				checkClick: true,
				tabbar: true,
				windowHeight: ''
			}
		},
		components: {
			Header,
			MxDatePicker,
			// xyDialog
		},
		onShow() {
			//#ifdef H5
			document.title = '提交预订'
			//#endif
			
			var date = new Date();
			this.currentDate = this.getNowFormatDate(date)
			this.selectDate = this.currentDate
			this.currentDateTxt = this.getNowFormatDateTxt(date)
			var nDate = new Date(date.getTime() + 24 * 60 * 60 * 1000);
			this.nextDate = this.getNowFormatDate(nDate);
			this.nextDateTxt = this.getNowFormatDateTxt(nDate);
			var afterDate = new Date(date.getTime() + (24 * 60 * 60 * 1000) * 2);
			this.afterDate = this.getNowFormatDate(afterDate);
			this.afterDateTxt = this.getNowFormatDateTxt(afterDate);
			this.totalPrice = this.resDate.price * this.ticketNum;
			// this.getData();
		},
		onLoad: function(option) {
			this.setitle = option.title
			console.log(option,">>>>>>>>>>>>>>>>>>>>>")
			uni.getSystemInfo({
		        success: (res)=> {
		            this.windowHeight = res.windowHeight;
		        }
    		});    
		    uni.onWindowResize((res) => {
		        if(res.size.windowHeight < this.windowHeight){
		            this.tabbar = false
		        }else{
		            this.tabbar = true
		        }
		    })

			
			this.spotId = option.id;
			var that = this;
			uni.getStorage({
				key:'ticket',
				success:function(res){
					console.log("传过来的数据----->",res.data);
					that.parentDate = res.data;
					that.resDate = res.data;
					that.resDate.price = parseFloat(that.resDate.lmmProductPriceResult.spotPrice);
				}
			})
			
			console.log("this.resDate--------->",that.resDate);
			// console.log(uni.getStorage({
			// 	key:'ticket'
			// }), '==========');
			// this.parentDate = uni.getStorage({
			// 	key:'ticket'
			// })
			// this.parentDate = JSON.parse(option.item)
		},
		mounted() {
		},
		watch: {
		},
		methods: {
			showTabbar(){
				this.tabbar = true;
				this.inputBlur(2);
			},
			hideTabbar(){
				this.tabbar = false;
			},
			inputFocus(index) {
				this.lastFocusInputIndex = index
			},
			inputBlur(index) {
				let self = this
				self.lastFocusInputIndex = index
				setTimeout(() => {
					self.checkInputBlur(index)
				}, 100)
			},
			checkInputBlur(lastIndex) {
				console.log(this.lastFocusInputIndex === lastIndex)
				if (this.lastFocusInputIndex === lastIndex) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 500
					});
					this.lastFocusInputIndex = -1
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_ADMISSION_PRICE, {
					id: this.parentDate.id,

				}).then(data => {
					console.log(data)
					this.resDate = data.data.objData
					console.log(this.resDate)
				})
			},
			//日期格式化
			getNowFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			//日期格式化txt
			getNowFormatDateTxt(date) {
				var seperator1 = "-";
				// var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			//门票数加减
			Add() {
				this.ticketNum++;
				this.totalPrice = this.resDate.price * this.ticketNum;
			},
			//门票数加减
			Sub() {

				if (this.ticketNum > 1) {
					this.ticketNum--;
				}
				this.totalPrice = this.resDate.price * this.ticketNum;
			},
			changeDate() {
				this.showPicker = true;
			},
			//订单须知跳转
			orderTip() {
				let obj = this.parentDate;
				console.log(obj)
				// this.show = true;
				uni.navigateTo({
					url: './ticket?item=' + JSON.stringify(obj),
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//公共弹窗服务
			showError(msg){
				uni.showToast({
						title:msg,
						icon: 'none',
						duration: 2000
					});
			},
			//判断输入内容是否为空 
			IsNull(tag,name) {
				var reg = /^\s*$/g;
				if (reg.test(name) || name == null || name == "") {
					this.pub.showError(tag + '不能为空');
					return true;
				} else {
					return false;
				}
			},
			//手机号验证
			checkPhone(phone) {
				if (!(/^1[34578]\d{9}$/.test(phone))) {
					this.pub.showError('手机号码有误，请重新输入');
					return true;
				} else {
					return false;
				}
			},
			//身份证验证
			checkIdentityCard(idcard){
				if(idcard == ''){
					this.pub.showError('身份证号码不能为空');
					return true;
				}
				var p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

				 let idnumReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
				// if(!p.test(idcard)){
				// 	this.pub.showError('身份证格式有误，请重新输入');
				// 	return true;
				// }else{
				// 	return false;
				// }
			},
			//提交
			submitOrder() {
				// if (this.checkClick) {
					let account = this.pub.getAccount();
					console.log(account)
					// let obj = {
					// 	unionid: account,
					// 	name: this.resDate.titleName,
					// 	telName: this.userName,
					// 	tel: this.userPhone,
					// 	credentials: this.identityCard,
					// 	ticketNum: this.ticketNum ,
					// 	userTime: this.selectDate,
					// 	spotId: this.spotId,
					// 	spotTicketId: this.resDate.id,
					// 	ticketPrice: this.resDate.price ,
					// 	payAmount: (this.resDate.price * this.ticketNum) ,
					// 	spotTicketName: this.resDate.name,
					// 	merchantNo: this.parentDate.merchantNo || '',
					// 	sellPrices: this.resDate.value_2,
					// 	totalSellPrice: this.resDate.value_2 * this.ticketNum,
					// 	payType: "在线支付",
					// 	type:"0"
					// }
					let obj = {
						bustype:"2",
						cardNumber:this.identityCard,
						channelType:'1',
						contactName:this.userName,
						contactPhone:this.userPhone,
						productCode:this.resDate.productId,
						quantity:this.ticketNum,
						sellPrice:this.resDate.lmmProductPriceResult.sellPrice,
						spotPrice:this.resDate.lmmProductPriceResult.spotPrice,
						spotTicketCode:this.resDate.goodsId,
						spotTicketTitle:this.resDate.goodsName,
						spotCode:this.resDate.lmmProductPriceResult.placeId,
						visitDate:this.selectDate,
						memberId:this.pub.getMemberId('memberid'),
						title:this.setitle,
						payAmount:this.resDate.lmmProductPriceResult.spotPrice * this.ticketNum
					}
					this.checkClick = false;
					//表单合法性校验
					if (this.IsNull('姓名',obj.contactName)) {
						return;
					}
					if (this.checkPhone(obj.contactPhone)) {
						return;
					}
					if(this.checkIdentityCard(obj.idcard)){
						return;
					}	
					console.log(obj)
					//提交订单
							uni.showLoading({
								mask: true,
								title: "正在提交订单..."
							})
							this.$postApi(this.$path.SET_ORDERFORM, obj).then(data => {
								console.log('提交参数------------->',data);
								uni.hideLoading()
								if (data.data.success) {
									// obj.orderId = data.data.data.orderId
									// obj.parentOrderId = data.data.data.parentOrderId
									uni.navigateTo({
										url: '/pages/scenicOrder/counter?data=' + JSON.stringify(obj) + "&orderId=" + data.data.data.id + '&bustype=1',
										animationType: 'pop-in',
										animationDuration: 200
									});

								} else {
									uni.showModal({
										content: data.data.error.errorMessage
									})
								}
							})
						
					
				// }
				// var that = this;
				// setTimeout(function() {
				// 	that.checkClick = true;
				// }, 3000);
			},
			sendSms(){
				//校验手机号是否输入
				
			},
			
			changeDateByActive(active){
				switch(active){
					case '1':
						this.isActive = true;
						this.isActive1 = false;
						this.isActive2 = false;
						this.isActiveMore = false;
						
						this.selectDate = this.currentDate;
					break;
					case '2':
						this.isActive = false;
						this.isActive1 = true;
						this.isActive2 = false;
						this.isActiveMore = false;
						
						this.selectDate = this.nextDate;
					break;
					case '3':
						this.isActive = false;
						this.isActive1 = false;
						this.isActive2 = true;
						this.isActiveMore = false;
						
						this.selectDate = this.afterDate;
					break;
					// default:
					// 	this.isActive = false;
					// 	this.isActive1 = false;
					// 	this.isActive2 = false;
					// 	this.isActiveMore = true;
					// 	
					// break;
				}
				console.log(this.selectDate);
			},
			//选择今日
			changeDateNow() {
				this.isActive = true;
				this.isActive1 = false;
				this.isActive2 = false;
				this.selectDate = this.currentDate
				console.log(this.currentDate)
			},
			//选择明日
			changeDateTomo() {
				this.isActive = false;
				this.isActive1 = true;
				this.selectDate = this.nextDate
				console.log(this.nextDate)
			},
			//选择其他日期
			onSelected(e) { //选择
				//e.value 为选择的值
				//e.date 为原始的date对象
				this.showPicker = false;
				if (e) { // 因为cancel事件也绑定了这个函数，而且canel事件传的参数false
					this[this.type] = e.value;
					console.log(e);

					let selectTime = this.getNowFormatDate(e.date)
					console.log(selectTime);
					if (selectTime == this.currentDate) {
						this.isActive = true;
						this.isActive1 = false;
						this.isActive2 = false;
						this.isActiveMore = false;
						
						this.selectDate = this.currentDate
					} else if (selectTime == this.nextDate) {
						this.isActive = false;
						this.isActive1 = true;
						this.isActive2 = false;
						this.isActiveMore = false;
						
						this.selectDate = this.nextDate
					}else if(selectTime == this.afterDate){
						this.isActive = false;
						this.isActive1 = false;
						this.isActive2 = true;
						this.isActiveMore = false;
						
						this.selectDate = this.afterDate;
					} else {
						this.isActive = false;
						this.isActive1 = false;
						this.isActiveMore = true;
						this.isActive2 = false;
						this.selectDate = selectTime;
						this.moreDateTxt = this.selectDate.toString().substring(this.selectDate.indexOf('-') + 1);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,uni-page-refresh{
		height: 100% !important;
	}
	.submitOrder {
		font-family: PingFang-SC-Medium;
		background: #F5F5F5;
		font-size: 26upx;
		    height: 100%;
		.pad-content{
			padding: 15upx;
		}
		.content {
			/* #ifdef H5 */
				margin-top: 90upx;
				/* #endif */
			// height: 550upx;
			background: #fff;
			// padding: 15upx;
			.content-top {
				// height: 150upx;
				padding: 32upx 0upx 0 27upx;
				.title {
					font-size: 40upx;
					color: #333333;
				}
				.ordering {
					// margin: 20upx 0;
					padding: 28upx 0 28upx 0;
					color: #333333;
					font-size: 30upx;
					display: flex;
					width: 96%;
					// padding-bottom: 20upx;
					justify-content: space-between;
					border-bottom:1px solid #eee;
					.ordering-right {
						margin-right: 50upx;
						color: #FE5A34;
						font-size: 35upx;
					}
				}

			}

			.content-bottom {
				// height: 320upx;
				background: #ffffff;
				.useDate {
					// display: flex;
					// justify-content: space-between;
					padding: 23upx;

					.useDateTxt {
						// text-align: center;
						line-height: 35upx;
						font-size: 30upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}

				.useDateList {
					display: flex;
					justify-content: space-between;

					.useDateNow,
					.useDateTorro,
					.useDateAfter{
						color: #888888;
						width: 25%;
						height: 98upx;
						border: 1upx solid rgba(221, 221, 221, 1);
						border-radius: 10upx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-top: 30upx;
						font-size: 30upx;
						margin-right: 11upx;
					}
					.active{
						background: dodgerblue;
						color: #ffffff !important;
					}
					
					.useDateMore {
						color: #888888;
						margin-top: 30upx;
						font-size: 28upx;
						width: 150upx;
						height: 98upx;
						border: 1upx solid rgba(221, 221, 221, 1);
						border-radius: 10upx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.ticket {
					display: flex;
					justify-content: space-between;
					padding: 23upx;

					.ticketTxt {
						text-align: center;
						line-height: 80upx;
						font-size: 30upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}

					.ticketList {
						display: flex;
						justify-content: space-between;

						.ticketAdd,
						.ticketSub {
							width: 50upx;
							height: 50upx;
							border: 1upx solid rgba(221, 221, 221, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 12upx;
							color: #888888;
							font-size: 30upx;
							margin-right: 11upx;
						}

						.ticketNum {
							margin-top: 12upx;
							margin-right: 11upx;
							width: 68upx;
							height: 50upx;
							border: 1upx solid rgba(221, 221, 221, 1);
							border-radius: 4upx;
							text-align: center;
						}
					}
				}
			}
		}
		.main-box{
			padding: 15upx;
		}
		.main {
			// margin-top: 50px;
			background: #fff;
			padding: 33upx;
			// height: 440upx;
			font-size: 28upx;
			// .phoneNum {
			// 	margin-top: 20upx;
			// }
			.title{
				font-size: 32upx;
				font-weight: bold;
			}
			.contacts,
			.phoneNum {
				font-size: 32upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 30upx 0upx;
				border-bottom: 1px solid #F5F5F5;
				padding-bottom: 10upx;

				text {
					font-size: 30upx;
					line-height: 44upx;
					text-align: center;
				}
				.ptext{
					width: 200upx;
					height: 80upx;
					display: flex;
					justify-content: flex-end;
					// text-align: center;
					align-items: center;
					// line-height: 30upx;
					font-size: 26upx;
					background: transparent;
					// border: #fff;
					// border: 0.01upx solid #fff;
					// border-radius: 12upx;
					color: #108EE9;
					
				}
				.mainInput {
					font-size: 30upx;
					// color: #ccc;
					// margin: -0upx 0 0 50upx;
					margin-left: 40upx;
					// line-height: 44upx;
				}

				.InputName {
					
					
				}
			}
		}
		.cu-bar.tabbar .submit:last-child{
			flex: 0.7;
			bottom: 0;
		}
		.foot-bar{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 108upx;
			background: #fff;
		}
		.bottom-left{
			display: flex;
			// justify-content: center;
			// margin-left: 70upx;
			align-items: center;
			width: 50%;
			.money {
					font-size: 36upx;
					color: #FE5A34;
				}
				margin-left: 50upx;
		}
		.bottom-right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
				width: 50%;
				background: linear-gradient(left,#fa643d,#ff504f);;
				color: #fff;
				height: 100%;
				padding: 20upx;
				text-align: center;
		}
			
		.fapiao{
				background: #fff;
				display: flex;
				padding: 25upx;
				font-size: 32upx;
				flex-wrap: nowrap;
				justify-content: space-between;
				flex-direction: row;
			}
		.fapiao-box{
			padding: 15upx;
			margin-bottom: 10upx;
		}
// 		.bottom {
// 			// height: 108upx;
// 			display: flex;
// 			border-top: 1upx solid #DDDDDD;
// 			position: fixed;
// 			bottom: 0;
// 			width: 100%;
// 			z-index: 100;
// 
// 			.bottom-left,
// 			.bottom-right {
// 				width: 70%;
// 				height: 108upx;
// 				margin-left: 50upx;
// 				text-align: center;
// 				line-height: 108upx
// 			}
// 
// 			.bottom-left {
// 				background: #FFFFFF;
// 
// 				.moneyTxt {
// 					font-size: 30upx;
// 				}
// 
// 				.money {
// 					font-size: 36upx;
// 					color: #FE5A34;
// 				}
// 			}
// 
// 			.bottom-right {
// 				border-left: 1upx solid #DDDDDD;
// 				font-size: 36upx;
// 				font-weight: 500;
// 				background: #108EE9;
// 			}
// 		}
	}
</style>
<!--  -->